<ng-container *ngIf="transactionId">
  <div class="balance-diagram-tooltip p-16" fxFlex="100" fxLayout="column" fxFlexAlign="start end">
    <span fxLayout="row wrap" fxLayoutAlign="start baseline">
      <p class="pr-16 font-weight-700">{{'transaction' | i18n}}</p><p>{{transactionId}}</p>
    </span>
    <span fxLayout="row wrap" fxLayoutAlign="start baseline">
      <p class="pr-16 font-weight-700">{{'date' | i18n}}</p><p>{{date}}</p>
    </span>
    <span fxLayout="row wrap" fxLayoutAlign="start baseline">
      <p class="pr-16 font-weight-700">{{'type' | i18n}}</p><p>{{transactionType | i18n}}</p>
    </span>
    <span fxLayout="row wrap" fxLayoutAlign="start baseline">
      <ng-container *ngIf="hasReceived" >
        <p class="pr-16 font-weight-700">{{'sender' | i18n}}</p><p>{{senderAddress}}</p>
      </ng-container>
      <ng-container *ngIf="!hasReceived" >
        <p class="pr-16 font-weight-700">{{'recipient' | i18n}}</p><p>{{recipientAddress}}</p>
      </ng-container>
    </span>
    <span fxLayout="row wrap" fxLayoutAlign="start baseline">
      <p class="pr-16 font-weight-700" >{{'amount' | i18n}}</p>
      <p class="pr-8" [ngClass]="{fg_green: hasReceived, fg_red: !hasReceived}">{{amount}}</p>
      <small>({{'fee' | i18n}} {{fee}})</small>
    </span>
  </div>
</ng-container>
